<template>
    <div class="pad5">
        <div class="padb5">
            <title-a>批量入库</title-a>
        </div>
        <div class="bcf round3 ofh pad5">
            <title-a>入库信息</title-a>
            <div class="marr10 mart5 padt10">
                <EzData :config="inConfig" v-model="model"></EzData>
            </div>

            <div class="mart10">
                <title-a>项目列表</title-a>
                <div class="flrc bc13 mart5 padtb5">
                    <div style="width: 50px;">&nbsp;</div>
                    <div class="flex2">名称</div>
                    <div class="flex1">数量</div>
<!--                    <div class="flex1">总价</div>-->
                    <div class="flex1">库位</div>
                    <div class="flex1">批次号</div>
<!--                    <div class="flex1">堆号</div>-->
                    <div class="flex1">指令单号</div>
                    <div class="flex2">备注</div>
                    <div style="width: 50px;">&nbsp;</div>
                </div>
                <div style="height: 50px;" class="flrc" :class="{bca003:index%2===1,}"
                     v-for="(item,index) in inList" :key="index">
                    <div style="width: 50px;">
                        <mu-button small @click="()=>{item.showStage++}" icon>
                            <mu-icon value="shuffle"></mu-icon>
                        </mu-button>
                    </div>
                    <div class="flex1">
                        <div class="flrc" v-show="item.showStage%2 === 1">
                            <div class="flex2 pad3" @click="()=>{item.showStage++}">
                                    {{item.itemName}}
                            </div>
                            <div class="flex1">
                                <mu-text-field solo @input="(v)=>{item.num = v*1}" :value="item.num" full-width></mu-text-field>
                            </div>
<!--                            <div class="flex1">-->
<!--                                <mu-text-field solo @input="(v)=>{item.cost = v*1}" :value="item.cost" full-width></mu-text-field>-->
<!--                            </div>-->
                            <div class="flex1">
                                <mu-text-field solo placeholder="库位" v-model="item.pos" full-width></mu-text-field>
                            </div>
                            <div class="flex1">
                                <mu-text-field solo placeholder="批次号" v-model="item.batchCode" full-width></mu-text-field>
                            </div>
<!--                            <div class="flex1">-->
<!--                                <mu-text-field solo placeholder="堆号" v-model="item.heapCode" full-width></mu-text-field>-->
<!--                            </div>-->
                            <div class="flex1">
                                <mu-text-field solo placeholder="指令单号" v-model="item.brand" full-width></mu-text-field>
                            </div>
                            <div class="flex2">
                                <mu-text-field solo placeholder="备注" v-model="item.note" full-width></mu-text-field>
                            </div>
                        </div>
                        <div class="flrc bcf" v-show="item.showStage%2 === 0" style="animation-duration: 0.3s">
                            <div class="flex1">
                                <ez-item-picker v-model="item.itemId" :name.sync="item.itemName"
                                                @select="()=>{if (item.itemId > 0){item.showStage++}}"></ez-item-picker>
                            </div>
                        </div>
                    </div>
                    <div class="flcc" style="width: 50px;">
                        <mu-button small icon @click="delRow(index)">
                            <mu-icon value="close"></mu-icon>
                        </mu-button>
                    </div>
                </div>

                <div class="pad5 flrc bdda">
                    <mu-button small @click="addRow">添加一行</mu-button>
                    <mu-button small @click="submit" color="primary">入库</mu-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import EzItemPicker from "@/pages/v1/wms/componets/EzItemPicker";
    import formBuilder from "@/comps/form/formBuilder";
    import EzData from "@/comps/EzData";
    import TitleA from "@/comps/comm/TitleA";
    import apiIOType from "@/pages/v1/wms/IOType/js/apiIOType";
    import apiDepartment from "@/pages/v1/wms/Department/js/apiDepartment";

    export default {
        name: "in_many",
        components: {TitleA, EzData, EzItemPicker,},
        data() {
            let inConfig = formBuilder()
            inConfig.addCascade("typeId", "入库类型", 2)
                .setApi(apiIOType.urlTree)
                .setApiParams({root: 1}).setRules([inConfig.R.notNull('请设置入库类型')])
            inConfig.addCascade("departmentId","入库部门",2).setApi(apiDepartment.urlTree)
            inConfig.addText("supplier", "经办人", 2)
            return {
                itemInfo: {
                    base: [],
                    log: []
                },
                model: {itemId: 0},
                inConfig,
                inList: []
            }
        },
        mounted() {
        },
        methods: {
            submit() {
                this.$http.post("/wms/admin/InLog/in_many", {
                    list: this.inList,
                    model: this.model
                }, res => {
                    if (res.code === 2001) {
                        this.$toast.success(res.message)
                    }
                })
            },
            delRow(index) {
                this.inList = this.$utils.arrayDelIndex(this.inList, index)
            },
            addRow() {
                this.inList.push({
                    itemId: 0,
                    num: 0,
                    pos: "",
                    batchCode: "",
                    heapCode: "",
                    brand: "",
                    note: "",
                    cost: 0,
                    //显示相关
                    showStage: 0
                })
            }
        },
        watch: {}
    }
</script>

<style scoped>

</style>